<template>
  <div class="personrec">
    <div class="title">人气推荐</div>
   <ul>
      <li v-for="item in hotGoodsList" :key="item.id" @click="goToDetail(item.id)">
        <div class="image">
          <img :src="item.list_pic_url" width="100%" style="display: block;" alt="">
        </div>
        <div class="text">
          <h4>{{item.name}}</h4>
          <h5>{{item.goods_brief}}</h5>
          <p>{{item.retail_price | filtermoney}}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HotGood",
  props: ["hotGoodsList"],
  methods:{
    goToDetail(item){
       this.$router.push(
         this.$router.push(`/productdetail/${item}`)
      ); 
    }
  }
};
</script>
<style lang="less" scoped>
.personrec {
  background: #fff;
  margin-top: 20px;
  margin-bottom: 20px;
  > .title {
    text-align: center;
    height: 50px;
    line-height: 50px;
    font-size: 0.2rem;
  }
  > ul {
    > li {
      background: #fafafa;
      margin-bottom: 5px;
      overflow: hidden;
      > .image  {
        float: left;
        width: 30%;
      }
      > .text {
        float: right;
        width: 70%;
        > h4 {
          height: 40px;
          line-height: 40px;
          font-weight: normal;
          font-size: 0.18rem;
        }
        > h5 {
          height: 30px;
          line-height: 30px;
          font-weight: normal;
        }
        > P {
          margin-top: 10px;
          color: darkred;
          font-size: 0.13rem;
        }
      }
    }
  }
}
</style>